<template>
	<view class="confimorder u-skeleton" :style="{minHeight:screen + 'px'}">
		<u-navbar :titleStyle="{fontWeight:'bold',color:'#333'}" bgColor="#FFCF4F" title="正在下单" leftIconColor="#FFF" />
		<view class="confimorder-card">
			<view class="confimorder-background"></view>
			<view class="confimorder-content" :style="{paddingBottom:safeArea?(safeArea+70) + 'px':'80px'}">
				<view class="confimorder-addrs">
					<view class="addrs-left">
						<!-- 有地址 -->
						<template v-if="model_addr.id">
							<view class="addrs-info u-skeleton-fillet"
								@click="multiRedirect('/subpkg/addresslist/addresslist?mode=' + '1'),add_is++">
								<view class="addrs-up u-skeleton-rect">
									<view class="addrs-name u-line-1">{{model_addr.name}}</view>
									<view class="addrs-number">{{model_addr.phone}}</view>
								</view>
								<view class="addrs-indetail u-line-1 u-skeleton-rect">
									{{format(model_addr.addr)}}{{model_addr.addr_extra}}</view>
							</view>
						</template>
						<template v-else>
							<view class="addrs-empty u-skeleton-fillet"
								@click="multiRedirect('/subpkg/addresslist/addresslist?mode=' + '1'),add_is++">
								<view class="empty-icon">
									<u-icon name="car" color="4C9940" size="45"></u-icon>
								</view>
								请选择收货地址
							</view>
						</template>
					</view>
					<view class="addrs-right">
						<view class="addrs-icon">
							<u-icon name="arrow-right" size="20" color="rgb(154,154,154)"></u-icon>
						</view>
					</view>
				</view>
				<view class="confimorder-info u-skeleton-fillet">
					<view class="info-item" v-for="item in goods_list" :key="item.id">
						<view class="info-left">
							<view class="info-name u-line-1">{{item.name}}</view>
							<view class="info-dliter" >
								<view class="info-sku u-line-1">
									{{(item.sku_name||item.linkSkuPrice.length) ?item.sku_name?item.sku_name:item.linkSkuPrice[0].name:'默认规格'}}</view>
								<view class="info-pacie">￥{{pacieView(item)}}</view>
							</view>
						</view>
						<view class="info-right">
							<view class="info-image">
								<u-image radius="10" :src="item.img[0]" width="100%" height="100rpx"></u-image>
							</view>
							<view class="info-num">X{{item.buy_num}}</view>
						</view>
					</view>
					<view class="info-remark u-skeleton-circle">
						<view class="remark-left">
							<view class="remark-text">备注：</view>
						</view>
						<view class="remark-right skeleton">
							<u-input placeholder="请输入备注..." border="none" v-model="remark"></u-input>
						</view>
					</view>
					<view class="info-freight u-skeleton-circle">
						<view class="freight-left">运费</view>
						<view class="freight-right">{{Number(money_info.total_freight_money)?`￥${money_info.total_freight_money}`:'免运费'}}</view>
					</view>
				</view>
				<view class="confimorder-info u-skeleton-fillet">
					<view class="coupon-box" @click="coupon_opne=true">
						<view class="coupon-left u-skeleton-rect">
							<view class="coupon-up">
								<view class="coupon-icon">
									<u-icon name="coupon" color="#FFCF4F" size="35"></u-icon>
								</view>
								优惠券
							</view>
							<b class="coupon-tips" v-if="coup_data.money">(优惠券抵扣￥{{coup_data.money}}元)</b>
						</view>
						<view class="coupon-right u-skeleton-rect">
							{{coupon_list.length ? `${coupon_list.length}张可用`:'暂无可用的优惠券'}}
							<view class="coupon-open">
								<u-icon name="arrow-right" color="#FFCF4F" size="20"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<statusbar>
			<view class="confimorder-botem">
				<button class="cu-btn confimorder-button u-skeleton-circle" @click="paymentChang">
					<view class="confimorder-pacie">支付 ￥{{totie_money}}</view>
				</button>
			</view>
		</statusbar>
	</view>
	<u-popu :value="coupon_opne" @close="coupon_opne=false" :scroll="false" mode="bottom" border-radius="50"
		height="500px">
		<view class="popu-box" @touchmove="to_chend">
			<view class="popu-totie">优惠券</view>
			<scroll-view scroll-y class="coupon_list" :style="{height:460 + 'px'}">
				<coupon :coup_data="coup_data" @couponChang="couponChang" mode="3" v-for="item in coupon_list"
					:key="item.id" :item="item" />
				<listempty mode="news" vh="300px" text="暂无优惠券" :list="coupon_list" />
			</scroll-view>
		</view>
	</u-popu>
	<comonpay ref="pay" @payEvnet="payEvnet" />
	<u-skelete :loading="loading" animation />
</template>

<script>
	export default {
		data() {
			return {
				loading:true,
				remark: '',
				coupon_opne: false,
				place_data: {},
				coupon_list: [],
				goods_data: [],
				model_addr: {},
				money_info: {},
				add_is: 0,
				coup_data: {},
				pay_totie: '',
			};
		},
		onLoad(e) {
			let data = JSON.parse(e.obj)
			this.place_data = data
			this.getplacedetails()
		},
		onShow() {
			if (this.add_is && Object.keys(this.addrs_data).length != 0) {
				Object.assign(this.model_addr, this.addrs_data)
			}
		},
		computed: {
			goods_list() {
				return this.goods_data.length && this.goods_data[0].goods_list || []
			},
			money_data(){
				return this.money_info || {}
			},
			totie_money(){
				return this.money_data.total_goods_money?Number(this.money_data.total_goods_money) <1?0.00:Number(this.money_data.total_goods_money).toFixed(2):'0.00'
			}
		},
		methods: {
			payEvnet(e){
				setTimeout(()=>{
					//支付完（成功，失败）
					uni.redirectTo({
						url: '/subpkg/orderstate/orderstate?type=' + e
					})
				},700)
			},
			couponChang(e) {
				this.coup_data = e.id == this.coup_data.id ? {} : e
				this.coupon_opne = !this.coupon_opne
				if (Object.keys(this.coup_data).length != 0) {
					if(!this.place_data.channel){
						this.$network('/api/order/order_pay_coupon_money', {
							id: this.place_data.goods_id,
							num: 1,
							coupon_id: e.id,
							coupon_num: 1,
							sku_id:this.place_data.sku_id
						}).then(res => {
							if (res.code == 1) {
								this.money_data.total_goods_money = res.data.pay_money<1?0.00:res.data.pay_money.toFixed(2)
							}else{
								this.coup_data = {}
							}
						}).catch((e)=>{
							this.coup_data = {}
						})
					}else{
						this.place_data.coupon_id = e.id
						this.place_data.coupon_num = 1
						this.getplacedetails()
					}
				} else {
					this.place_data.coupon_num = ''
					this.place_data.coupon_id = ''
					this.money_data.total_goods_money = this.pay_totie
					if(this.place_data.channel){
						this.getplacedetails()
					}
				}
			},
			format(e) {
				return e && e.replace(/\s/g, "")
			},
			pacieView(e) {
				if (!e.linkSkuPrice.length) {
					return e.price
				}
				if (e.linkSkuPrice.length && e.linkSkuPrice.length < 2 && e.sku_id == 0) {
					return e.linkSkuPrice[0].price
				}
				let sku_oid =  this.place_data.channel?e.sku_id:this.place_data.sku_id
				let obj = e.linkSkuPrice.find(item => item.id == sku_oid)
				if(obj){
					return obj.price
				}else{
					return e.price
				}
			},
			getplacedetails() {
				this.$network('/api/order/preview', {
					goods_id: this.place_data.goods_id,
					sku_id: this.place_data.sku_id,
					num: this.place_data.num,
					channel: this.place_data.channel,
					coupon_id:this.place_data.coupon_id,
					coupon_num:this.place_data.coupon_num
				}).then(res => {
					const {
						coupon_list,
						goods_data,
						model_addr,
						money_info
					} = res.data
					if(res.code == 1){
						this.goods_data = goods_data
						if(!this.coupon_list.length){
							this.coupon_list = coupon_list
						}
						if(Object.keys(this.model_addr).length ==0){
							this.model_addr = model_addr
						}
						this.pay_totie = money_info.total_goods_money
						this.money_info = money_info
					}
				}).finally((e) => {
					this.$nextTick(() => {
						setTimeout(() => {
							this.loading = false
						}, 600)
					})
				})
			},
			paymentChang() {
				if(!this.model_addr.id){
					this.$u.toast('请添加地址')
					return
				}
				this.$network('/api/order/confirm',{
					addr_id:this.model_addr.id,
					goods_id:this.place_data.goods_id,
					sku_id:this.place_data.sku_id,
					num:this.place_data.num,
					extra:[{coupon_id:this.coup_data.id,num:1}],
					channel:this.place_data.channel,
					remark:this.remark
				}).then(res=>{
					if(res.code == 1){
						this.$u.vuex('card_show',true)
						const { order_h_no ,need_pay} = res.data
						if(!need_pay){
							uni.redirectTo({
								url: '/subpkg/orderstate/orderstate?type=' + 'success'
							})
							return
						}
						this.generateWechat(order_h_no)
					}
				})
			},
			generateWechat(order_no){
				this.$network('/api/pay/info',{
					pay_way:'wechat_mini',
					order_no
				}).then(res=>{
					if(res.code == 1){
						const {
							info
						} = res.data
						this.$refs.pay.payChang(info)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
	}
	.info-freight{
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		color: #9a9a9a;
		margin-top: 20rpx;
	}
	.addrs-empty {
		display: flex;
		align-items: center;
		font-size: 35rpx;
		color: #FFCF4F;
		height: 100%;

		.empty-icon {
			margin-right: 15rpx;
		}
	}

	.coupon_list {
		padding: 0 20rpx;
	}

	.popu-box {
		width: 100%;
		position: relative;
		height: 500px;
	}

	.popu-totie {
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 40px;
		background: #FFF;
		z-index: 1;
		position: sticky;
		top: 0;
		border-bottom: 1px solid #ECECEC;
	}

	.confimorder-botem {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;

		.confimorder-button {
			width: 100%;
			height: 90rpx;
			background: #FFCF4F;
			color: #333;
			font-size: 30rpx;
			font-weight: bold;
			padding: 0;
			margin: 0;
			border-radius: 24px;
		}
	}

	.confimorder-info {
		width: 100%;
		padding: 15px;
		background: #FFF;
		border-radius: 5px;
		margin-top: 25rpx;

		.coupon-box {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.coupon-right {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #FFCF4F;

				.coupon-open {
					margin-left: 15rpx;
				}
			}

			.coupon-left {
				font-size: 30rpx;
				color: #FFCF4F;
				font-weight: bold;

				.coupon-up {
					display: flex;
					align-items: center;

					.coupon-icon {
						margin-right: 15rpx;
					}
				}

				.coupon-tips {
					font-size: 20rpx;
					font-weight: 400;
				}
			}
		}

		.info-remark {
			display: flex;
			align-items: center;

			.remark-left {
				width: 15%;
				font-size: 28rpx;
				color: rgb(154, 154, 154);
			}

			.remark-right {
				flex: 1;
			}
		}

		.info-item {
			display: flex;
			justify-content: space-between;
			align-items: initial;
			margin-bottom: 20rpx;
			padding-bottom: 15rpx;
			border-bottom: 1px solid #ECECEC;

			.info-right {
				width: 18%;

				.info-image {
					width: 100%;
				}

				.info-num {
					font-size: 40rpx;
					font-weight: bold;
					color: #000;
					text-align: center;
					margin-top: 15rpx;
				}
			}

			.info-left {
				width: 80%;

				.info-name {
					font-size: 35rpx;
					font-weight: bold;
					color: #000;
				}

				.info-dliter {
					margin-top: 20rpx;
					font-size: 28rpx;
					color: rgb(154, 154, 154);

					.info-sku {
						margin-bottom: 10rpx;
					}
				}
			}
		}
	}

	.confimorder-addrs {
		width: 100%;
		padding: 15px;
		min-height: 180rpx;

		background: #FFF;
		border-radius: 5px;
		display: flex;
		align-items: initial;
		justify-content: space-between;

		.addrs-left {
			width: 93%;

			.addrs-indetail {
				font-size: 28rpx;
				color: rgb(154, 154, 154);
			}

			.addrs-up {
				margin-bottom: 15rpx;
				display: flex;
				align-items: center;
				font-size: 38rpx;
				font-weight: bold;
				color: #000;

				.addrs-name {
					margin-right: 20rpx;
				}
			}
		}

		.addrs-right {
			width: 4%;
			display: flex;
			align-items: center;
			justify-content: center;

		}
	}

	.confimorder-card {
		position: relative;

		.confimorder-background {
			background: #FFCF4F;
			width: 100%;
			height: 50px;
		}

		.confimorder-content {
			position: absolute;
			top: 30%;
			left: 0;
			width: 100%;
			padding: 0 20rpx;
		}
	}
</style>
